{% extends 'base.html' %}
{% load static %}

{% block title %}批量登分 - 评分系统{% endblock %}

{% block extra_css %}
<style>
    .repository-card {
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .repository-card:hover {
        border-color: #007bff;
        box-shadow: 0 2px 8px rgba(0,123,255,0.2);
    }

    .repository-card.selected {
        border-color: #007bff;
        background-color: #f8f9fa;
    }

    .excel-files {
        font-size: 0.9em;
        color: #666;
        margin-top: 8px;
    }

    .loading {
        display: none;
    }

    .result-message {
        margin-top: 20px;
        padding: 15px;
        border-radius: 5px;
    }

    .result-success {
        background-color: #d4edda;
        border: 1px solid #c3e6cb;
        color: #155724;
    }

    .result-error {
        background-color: #f8d7da;
        border: 1px solid #f5c6cb;
        color: #721c24;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">
                        <i class="fas fa-tasks"></i> 批量登分
                    </h4>
                </div>
                <div class="card-body">
                    <!-- 步骤说明 -->
                    <div class="alert alert-info">
                        <h5><i class="fas fa-info-circle"></i> 使用说明</h5>
                        <ol>
                            <li>系统会自动扫描基础仓库目录下的所有仓库</li>
                            <li>只显示包含"平时成绩登记表"的仓库</li>
                            <li>选择要批量登分的仓库</li>
                            <li>系统会自动处理该仓库下的所有作业，并将成绩登记到Excel文件中</li>
                            <li>支持单班级和多班级仓库的自动识别和处理</li>
                        </ol>
                    </div>

                    <!-- 仓库选择 -->
                    <div class="form-group">
                        <label for="repository-select"><strong>选择仓库：</strong></label>
                        <div id="repository-list" class="mt-3">
                            <div class="text-center">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="sr-only">加载中...</span>
                                </div>
                                <p class="mt-2">正在加载仓库列表...</p>
                            </div>
                        </div>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="form-group mt-4">
                        <button type="button" id="batch-grade-btn" class="btn btn-primary btn-lg" disabled>
                            <i class="fas fa-play"></i> 开始批量登分
                        </button>
                        <button type="button" id="refresh-btn" class="btn btn-secondary btn-lg ml-2">
                            <i class="fas fa-sync-alt"></i> 刷新仓库列表
                        </button>
                    </div>

                    <!-- 加载状态 -->
                    <div id="loading" class="loading text-center mt-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="sr-only">处理中...</span>
                        </div>
                        <p class="mt-2">正在执行批量登分，请稍候...</p>
                    </div>

                    <!-- 结果显示 -->
                    <div id="result" class="result-message" style="display: none;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    let selectedRepository = null;

    // 加载仓库列表
    function loadRepositoryList() {
        $('#repository-list').html(`
            <div class="text-center">
                <div class="spinner-border text-primary" role="status">
                    <span class="sr-only">加载中...</span>
                </div>
                <p class="mt-2">正在加载仓库列表...</p>
            </div>
        `);

        $.ajax({
            url: '{% url "grading:batch_grade_registration" %}',
            method: 'GET',
            success: function(response) {
                if (response.status === 'success') {
                    displayRepositoryList(response.repositories);
                } else {
                    showError('加载仓库列表失败: ' + response.message);
                }
            },
            error: function(xhr, status, error) {
                showError('加载仓库列表失败: ' + error);
            }
        });
    }

    // 显示仓库列表
    function displayRepositoryList(repositories) {
        if (repositories.length === 0) {
            $('#repository-list').html(`
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle"></i>
                    未找到包含成绩登记表的仓库。请确保：
                    <ul class="mt-2">
                        <li>基础仓库目录已正确配置</li>
                        <li>仓库中包含"平时成绩登记表-*.xlsx"文件</li>
                    </ul>
                </div>
            `);
            return;
        }

        let html = '<div class="row">';
        repositories.forEach(function(repo) {
            html += `
                <div class="col-md-6 col-lg-4">
                    <div class="repository-card" data-repo="${repo.name}">
                        <h5 class="card-title">${repo.name}</h5>
                        <p class="card-text">
                            <i class="fas fa-file-excel"></i>
                            包含 ${repo.excel_count} 个成绩登记表
                        </p>
                        <div class="excel-files">
                            <strong>成绩登记表：</strong><br>
                            ${repo.excel_files.join('<br>')}
                        </div>
                    </div>
                </div>
            `;
        });
        html += '</div>';

        $('#repository-list').html(html);

        // 绑定点击事件
        $('.repository-card').click(function() {
            $('.repository-card').removeClass('selected');
            $(this).addClass('selected');
            selectedRepository = $(this).data('repo');
            $('#batch-grade-btn').prop('disabled', false);
        });
    }

    // 执行批量登分
    function executeBatchGrade() {
        if (!selectedRepository) {
            showError('请先选择要处理的仓库');
            return;
        }

        $('#loading').show();
        $('#result').hide();
        $('#batch-grade-btn').prop('disabled', true);

        $.ajax({
            url: '{% url "grading:batch_grade_registration" %}',
            method: 'POST',
            data: {
                repository: selectedRepository,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success: function(response) {
                $('#loading').hide();
                if (response.status === 'success') {
                    showSuccess(response.message);
                } else {
                    showError(response.message);
                }
            },
            error: function(xhr, status, error) {
                $('#loading').hide();
                showError('执行批量登分失败: ' + error);
            },
            complete: function() {
                $('#batch-grade-btn').prop('disabled', false);
            }
        });
    }

    // 显示成功消息
    function showSuccess(message) {
        $('#result').removeClass('result-error').addClass('result-success').html(`
            <i class="fas fa-check-circle"></i> ${message}
        `).show();
    }

    // 显示错误消息
    function showError(message) {
        $('#result').removeClass('result-success').addClass('result-error').html(`
            <i class="fas fa-exclamation-triangle"></i> ${message}
        `).show();
    }

    // 绑定事件
    $('#batch-grade-btn').click(executeBatchGrade);
    $('#refresh-btn').click(function() {
        selectedRepository = null;
        $('#batch-grade-btn').prop('disabled', true);
        loadRepositoryList();
    });

    // 初始加载
    loadRepositoryList();
});
</script>
{% endblock %}
